<template>
  <div class="tuanlist">
    <div class="content">
        <div class="btn">
            <span @click="active(0)" :class="{active:currentIndex == 0}">正在抢购</span>
            <span @click="active(1)" :class="{active:currentIndex == 1}">上新预告</span>
        </div>
        <div class="list" v-for="(item,index) in arr " :key="index">
            <div class="imgbox">
                <img v-lazy="item.picture" alt="">
            </div>
            <div class="text">
                <p>{{item.name}}</p>
                <h2>{{item.name}}</h2>
                <div class="pirce">
                    <div class="left">
                        <span>爆爆团价</span>
                        <span>￥{{item.min_price}}</span>
                        <del>￥{{item.min_price}}</del>
                    </div>
                    <div class="right">
                        <div class="btns">马上抢</div>
                        <p>{{item.month_saled_content}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {tuan} from '@/utlis/api'
export default {
    data(){
        return{
            currentIndex:0,
            arr:[]
        }
    },
    mounted(){
        tuan( {status:0}).then(({data})=>{
            console.log(data);
            this.arr = data.list
        })
    },
    methods:{
        active(val){
            this.currentIndex = val
            tuan( {status:val}).then(({data})=>{
                console.log(data);
                this.arr = data.list
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.content{
        position: absolute;
        top: 140px;
        left: 2%;
        width: 96%;
        .btn{
            margin: 20px;
            span{
                margin-right:15px;
                color: #fee5b8;
                background: rgba(0,0,0,0);
            }
        }
        .list{
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 10px;
            background: white;
            display: flex;
            border: 1px solid #ccc;
            .imgbox{
                width: 100px;
                height: 100px;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
            }
            .text{
                flex: 1;
                p{
                    font-size: 12px;
                    color: #ccc;
                    padding-bottom: 5px ;
                }
                h2{
                    font-size: 18px;
                }
                .pirce{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .left{
                        display: flex;
                        flex-direction: column;
                        span:first-child{
                            color: orange;
                            font-size: 12px;
                            padding: 5px 0;
                        }
                        span:nth-child(2){
                            color: red;
                            font-size: 18px;
                            font-weight: 600;
                        }
                        del{
                            font-size: 12px;
                            color: #ccc;
                        }
                    }
                    .right{
                        div{
                            margin:10px 0;
                            line-height: 30px;
                            padding: 0 10px;
                            background-color: red;
                            color: white;
                            border-radius: 15px;
                        }
                        p{
                            text-align: center;
                        }
                    }
                }
            }
            
        }
    }
.active{
    font-weight: 700;
}

</style>